<script setup>
import { ref, watch } from "vue";
import { useRouter } from "vue-router";
import MaterialButton from "@/components/MaterialButton.vue";
import vueMkHeader from "@/assets/img/products/detail/pvideo/bg.png";

import videoBg from "@/assets/img/products/detail/video-bg.png";

import car1 from "@/assets/img/products/detail/pvideo/car1.png";
import car2 from "@/assets/img/products/detail/pvideo/car2.png";
import car3 from "@/assets/img/products/detail/pvideo/car3.png";

const router = useRouter();
const props = defineProps({
    images: {
        type: String,
    },
});
let imagesArr = ref([]);

watch(
    () => props.images,
    (newRouterName) => {
        if (newRouterName) {
            if (typeof newRouterName == "string" && newRouterName.indexOf(",") > -1) {
                imagesArr.value = newRouterName.split(",");
            } else {
                imagesArr.value = [newRouterName];
            }
        }
    },
    { immediate: true }
);
</script>
<template>
    <div class="py-6" :style="`background-image: url(${vueMkHeader});no-repeat bottom / contain`" loading="lazy">
        <div class="container">
            <div class="row mb-4">
                <div class="col-lg-4" v-for="(item, index) in imagesArr" :key="index">
                    <img style="width: 100%" :src="item" alt="" class="img-fluid" />
                </div>
            </div>
            <!-- <div class="row">
                <div class="col-lg-12">
                    <img style="width: 100%" :src="videoBg" alt="" class="img-fluid" />
                </div>
            </div> -->
        </div>
    </div>
</template>

<style scoped>
.dot {
    width: 1rem;
    height: 1rem;
    background: #ed1c24;
    border-radius: 0.5rem;
    margin-right: 1rem;
    flex-shrink: 0;
    margin-top: 1rem;
}
.text-item {
    display: flex;
    margin: 1rem 0;
}
.content {
    width: calc(100% - 3rem);
    font-size: 2rem;
    color: #000;
}
</style>
